﻿
@{
    Layout = null;

    var list = ViewData["select_parent"] as List<SelectListItem>;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">
    <title>insert</title>
    <link href="~/Content/Css/plugins/bootstrap-fileinput/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <link href="~/Scripts/plugins/jcrop1902/css/jquery.Jcrop.min.css" rel="stylesheet" />
    <style>
        .row {
            margin: 0px 0px;
        }
        /*.form-group {
            min-height:85px;
        }*/
        .form-group {
            min-height: 72px;
            margin-bottom: 0px;
        }

        .control-label {
            text-align: right;
        }

        img {
            max-width: 300px;
            _width: expression(this.width > 300 ? "300px" : this.width);
        }
    </style>
</head>
<body>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="col-xs-12">
            <form class="form-horizontal m-t" id="mainForm">
                <div class="form-group">
                    <label class="col-xs-3 control-label">名称：</label>
                    <div class="col-xs-8">
                        <input id="Name" name="Name" type="text" class="form-control">
                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>请填写金融名称</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-3 control-label">父级名称：</label>
                    <div class="col-xs-8">
                        <select class="form-control" name="ParentId" id="ParentId">
                            @foreach (SelectListItem item in list)
                            {
                                <option value='@item.Value' @(item.Selected?"Selected":"")>@(item.Text)</option>
                            }
                        </select>

                        @*<input id="Name" name="Name" type="text" class="form-control">*@
                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>请填写父级名称</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-3 control-label">Icon图片：</label>
                    <div class="col-xs-8">

                        <div class="form-inline">

                            <input id="Icon" name="Icon" type="hidden" class="form-control" />
                            <input type="file" name="file_data" id="txt_file" />


                        </div>
                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>请上传Icon图片 128*128</span>
                    </div>
                </div>
                <div class="form-group" >
                    <div class="col-xs-12">

                        <div id="jcrop2" class="col-xs-12" style="display:none;">
                            <label class="col-xs-12" style="margin-left: 35px; display:none;">标记剪切线，保证头像质量（正方形），点击上传文件</label>
                            <div class="col-xs-12" style="margin-left: 40px;">
                                <img alt="" src="" id="cut-img" /> @*style="max-height:128px;max-width:128px;overflow:hidden;"*@
                            </div>
                        </div>

                        <input type="hidden" id="x" name="x" />
                        <input type="hidden" id="y" name="y" />
                        <input type="hidden" id="w" name="w" />
                        <input type="hidden" id="h" name="h" />
                    </div>
                </div>
                <div class="col-xs-11 m-t">
                    <button id="submit" class="btn btn-primary pull-right" type="submit">
                        <i class="fa fa-check"></i>&nbsp;提&nbsp;交
                    </button>

                    @*<button id="testBtn" class="btn btn-primary" type="button">
                            <i class="fa fa-check"></i>&nbsp;测&nbsp;试
                        </button>*@
                </div>
            </form>
        </div>
    </div>
    <!-- 全局js -->
    <script type="text/javascript" src="~/Scripts/jquery.min.js?v=2.1.4"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>

    <!-- jQuery Validation plugin javascript-->
    <script type="text/javascript" src="~/Scripts/plugins/validate/jquery.validate.min.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/validate/messages_zh.min.js"></script>
    <script type="text/javascript" src="~/Scripts/Extensions/ExtValidator.js"></script>

    <!-- layer javascript -->
    <script type="text/javascript" src="~/Scripts/plugins/layer/layer.min.js"></script>

    <!-- bootstrap-fileinput -->
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-fileinput/fileinput.min.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-fileinput/locales/zh.js"></script>
    <script src="~/Scripts/plugins/jcrop1902/js/jquery.Jcrop.min.js"></script>
    <script src="~/Scripts/plugins/jcrop1902/js/jquery.color.js"></script>
    @*<script src="~/Scripts/plugins/bootstrap-fileinput/fileinput.js"></script>*@

    <script>
        $(function () {
            // validate signup form on keyup and submit
            var icon = "<i class='fa fa-times-circle'></i> ";
            var validator = $("#mainForm").validate({
                rules: {
                    Name: {
                        required: true,
                        minlength: 2
                    }
                },
                messages: {
                    Name: {
                        required: icon + "请输入名称",
                        minlength: icon + "名称必须两个字符以上"
                    }
                },
                submitHandler: function (form) {

                    if ($('#Icon').val() == "") {
                        console.log("|" + $('#Icon').val() + "?");

                        //询问框
                        parent.layer.confirm('请确认，是否需要上传图片？', {
                            btn: ['确定', '取消'], //按钮
                            shade: false //不显示遮罩
                        }, function (index, layero) {
                            parent.layer.close(index);//确定后
                            toAjax();
                        });
                        //return;
                    } else {
                        toAjax();
                    }
                    

                }
            });
        });
        function toAjax() {
            //进行ajax传值
            $.ajax({
                url: "/Item/InsertAsync",
                type: "post",
                dataType: "json",
                data: $('#mainForm').serialize(),
                success: function (data) {
                    //Info,Success,Warning,Error
                    var type = data.type;
                    if (type == 1) {
                        layer.msg(data.content, { icon: 6, time: 2000 },
                            function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });

                    } else {
                        layer.msg(data.content, { icon: 5, time: 2000 });
                    }
                }
            });
        }


        var oFileInput;
        $(function () {
            oFileInput = new FileInput();
            oFileInput.Init("txt_file", "/Item/UploadImageAsync", getExtraData);
            // validate signup form on keyup and submit
            var icon = "<i class='fa fa-times-circle'></i> ";

            //$('#submit').attr('disabled', true);


            function getExtraData() {
                return {
                    isJcrop:"0",
                    sw: $('.jcrop-holder').css('width'),
                    sh: $('.jcrop-holder').css('height'),
                    x: $('#x').val(),
                    y: $('#y').val(),
                    w: $('#w').val(),
                    h: $('#h').val()
                }
            }
        });

        //初始化fileinput
        var FileInput = function () {
            var oFile = new Object();

            //初始化fileinput控件（第一次初始化）
            oFile.Init = function (ctrlName, uploadUrl, data) {
                var control = $('#' + ctrlName);


                //初始化上传控件的样式
                control.fileinput({
                    language: 'zh', //设置语言
                    uploadUrl: uploadUrl, //上传的地址
                    allowedFileExtensions: ['jpg', 'png', 'gif'],//接收的文件后缀
                    uploadExtraData: data,//上传时除了文件以外的其他额外数据
                    showUpload: true, //是否显示上传按钮
                    showCaption: false,//是否显示标题
                    browseClass: "btn btn-primary", //按钮样式
                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                    showPreview: false,
                    showRemove: false,
                    dropZoneEnabled: false,//是否显示拖拽区域
                    required: true,
                    showUploadedThumbs: false,
                    //indicatorSuccess
                    maxFileCount: 1, //表示允许同时上传的最大文件个数
                    previewFileIconSettings: {
                        'jpg': '<i class="glyphicon glyphicon-picture"></i>',

                    },
                    maxImageWidth: 64,//图片的最大宽度
                    maxImageHeight: 64,//图片的最大高度
                    initialPreview: [ //预览图片的设置
                    @*"<img src='@(ViewBag.file_path+ViewBag.file_name)' class='file-preview-image' alt='肖像图片' title='肖像图片'>",*@
                    "",
                    @*],
                    initialPreviewConfig: [
                           {
                               caption: '@(ViewBag.file_name)', width: '120px', url: '/User/DeleteAvatar', key: @(ViewBag.avatar_id), extra: { id: @(ViewBag.avatar_id) }
                           }
                            //, {
                            //    caption: 'desert.jpg', width: '120px', url: 'http://localhost/avatar/delete', key: 100, extra: { id: 100 }
                            //}*@

                    ]
                });
                @*$('#PhotoId').val(@(ViewBag.avatar_id));
                $('#PhotoName').val('@(ViewBag.file_path + ViewBag.file_name)');*@

                //导入文件上传完成之后的事件
                control.on("fileuploaded", function (event, data, previewId, index) {

                    //console.log(data);
                    console.log('-------' + data + '|' + data.response.type);
                    var type = data.response.type;
                    if (type == 1) {
                        var obj = data.response.data;
                        console.log(data.response.data);



                        //$("#PhotoId").val(obj.id);//.html('<input type="hidden" id="PhotoId" name="PhotoId" value="'+pid+'" />')
                        $('#Icon').val(obj);
                        $('#jcrop2').hide();

                        $('#txt_file').attr('disabled', true)//上传成功 禁止再上传
                        $('#submit').attr('disabled', false);//提交按钮 解禁
                        //$('#submit').click();//提交按钮 解禁
                        //layer.msg(data.content, { icon: 6, time: 2000 },
                        //    function () {
                        //        var index = parent.layer.getFrameIndex(window.name);
                        //        parent.layer.close(index);
                        //    });

                    } else {
                        //layer.msg(data.content, { icon: 5, time: 2000 });
                    }

                });

                control.on('filepredelete', function (event, key) {
                    console.log('Key pre = ' + key);
                });
                control.on('filedeleted', function (event, key) {
                    console.log('Key = ' + key);
                    $('#submit').attr('disabled', true);
                });

                //control.on('change', showPreview);
                control.on('change', readURL);

            }

            return oFile;
        };

        var api;
        function readURL(efile) {
            var img = $('#cut-img');
            $('#jcrop2').show();
            if (this.files && this.files[0]) {
                //img.css('display','');
                var reader = new window.FileReader();
                reader.readAsDataURL(this.files[0]);
                

                reader.onload = function (e) {
                    console.log("on load..");
                    img.removeAttr('src');
                    img.attr('src', e.target.result);

                    $("<img/>").attr("src", e.target.result).load(function () {
                        
                        //realWidth = this.width;
                        //realHeight = this.height;
                        //如果真实的宽度大于浏览器的宽度就按照100%显示
                        if (this.width > 128 || this.height > 128) {
                            //console.log(realWidth + " == " + realHeight);
                            $(img).attr("title", "长度或宽度太大");
                            //$(img).css("width", "128px").css("height", "128px");
                        }
                        else {//如果小于浏览器的宽度按照原尺寸显示
                            //$(img).css("width", realWidth + 'px').css("height", realHeight + 'px');

                            img.Jcrop({
                                allowSelect: false,
                                setSelect: [0, 0, 64, 64],
                                handleSize: 10,
                                aspectRatio: 1,
                                minSize: [80, 80],
                                maxSize: [350, 350],
                                //getWidgetSize: function () {
                                //    return [350, 350];
                                //},
                                onSelect: updateCords
                            }, function () {
                                api = this;
                            });
                        }
                    });

                    
                };

                if (api != undefined) {
                    api.destroy();
                }
            }
            function updateCords(obj) {
                $("#x").val(obj.x);
                $("#y").val(obj.y);
                $("#w").val(obj.w);
                $("#h").val(obj.h);
            }
        };
        //$('#testBtn').click(function (e) {
        //    parent.layer.open({
        //        type: 2,
        //        title: '选择角色',
        //        shadeClose: false,
        //        shade: 0.4,
        //        area: ['800px', '500px'],
        //        content: '/Role/Test',
        //        end: function () {
        //            console.info(parent.selectedId);
        //            $('#Name').val(parent.selectedId);
        //        }
        //    });
        //});
    </script>
</body>
</html>
